<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { fetchSearch } from '@/service/api/group';
import GroupEdit from './edit.vue';

defineOptions({ name: 'GroupManage' });

const enable = ref(true);
const loading = ref(false);
const edit = ref();

const params = ref<Api.GroupEntity.GroupSearchParams>({
  page: 1,
  size: 15,
  name: '',
  userId: null
});
const resp = ref({
  total: 0,
  records: [] as any
});

async function search() {
  await fetchSearch(params.value).then(res => {
    // Object.assign(resp, res.data);
    resp.value.records = res.data.records;
    resp.value.total = res.data.total;
    // resp.current = res.data.current;
    // resp.size = res.data.size;
    // console.log(resp, res);
  });
}
function add() {
  edit.value.init(null);
}
function sizeChange(size: number) {
  params.value.size = size;
  search();
}
function pageChange(page: number) {
  params.value.page = page;
  search();
}
function clear() {
  params.value.name = '';
  params.value.page = 1;
  search();
}
function showEdit(row: Api.GroupEntity.GroupModel) {
  edit.value.init(row);
}
onMounted(() => {
  search();
});
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <ElCard class="sm:flex-1-hidden card-wrapper" body-class="ht50">
      <template #header>
        <ElForm ref="formRef" :model="params" label-position="right" :label-width="80">
          <ElRow :gutter="24" justify="center">
            <ElCol :lg="6" :md="8" :sm="12">
              <ElFormItem label="分组名称" prop="name">
                <ElInput v-model="params.name" placeholder="分组名称" />
              </ElFormItem>
            </ElCol>
            <ElCol :lg="6" :md="8" :sm="12">
              <ElButton @click="search">
                <i class="fa fa-search">搜索</i>
              </ElButton>
              <ElButton @click="clear">
                <i class="fa fa-close">重置</i>
              </ElButton>
              <ElButton @click="add">
                <i class="fa fa-plus">新建</i>
              </ElButton>
            </ElCol>
          </ElRow>
        </ElForm>
      </template>
      <ElTable v-loading="loading" height="100%" border class="sm:h-full" :data="resp.records" row-key="id">
        <ElTableColumn fixed type="index" align="center" width="40px" header-align="center" />
        <ElTableColumn label="分组名称" prop="name" align="center" header-align="center" />
        <ElTableColumn label="用户数" prop="staffCount" align="center" header-align="center" />
        <ElTableColumn label="创建时间" prop="createdTime" align="center" header-align="center" />
        <ElTableColumn label="修改时间" prop="updateTime" align="center" header-align="center" />
        <ElTableColumn fixed="right" align="center" label="操作" width="80px">
          <template #default="scope">
            <ElButtonGroup>
              <ElButton plain size="small" :disabled="enable == false" @click="showEdit(scope.row)">查看</ElButton>
            </ElButtonGroup>
          </template>
        </ElTableColumn>
      </ElTable>
      <template #footer>
        <div class="mt-20px flex justify-center">
          <ElPagination
            v-model:current="params.page"
            v-model:page-size="params.size"
            v-model:total="resp.total"
            :page-sizes="[10, 12, 15, 20, 25, 30, 40, 50, 75, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="sizeChange"
            @current-change="pageChange"
          />
        </div>
      </template>
    </ElCard>
    <GroupEdit ref="edit" @reload="search" />
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card) {
  .ht50 {
    height: calc(100% - 50px);
  }
}
.w-200px {
  width: 400px;
}
</style>
